<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    th, td {
        border: 1px solid;
    }
</style>

<script>
    var firstTrObj;
    window.onload = function () {
        firstTrObj = document.getElementById("firstTr")
        var mainTableObj = document.getElementById("mainTable");
        var trArray = mainTableObj.getElementsByTagName("tr");
        var array = mainTableObj.getElementsByClassName("dd");
        for (var i = 0; i < trArray.length; i++) {
            trArray[i].onclick = function () {
                showBody(this);
            }
        }
    }

    function showBody(trObj) {
        firstTrObj.style.backgroundColor = "white";
        trObj.style.backgroundColor = "blue";
        firstTrObj = trObj;
    }


</script>

<body>

<table id="mainTable">
    <tr id="firstTr" class="dd">
        <th>id</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>职位</th>
        <th>学历</th>
    </tr>
    <tr class="dd">
        <td>1</td>
        <td>赵云</td>
        <td>男</td>
        <td>21</td>
        <td>部门经理</td>
        <td>本科</td>
    </tr>
    <tr>
        <td>2</td>
        <td>吕布</td>
        <td>男</td>
        <td>21</td>
        <td>普通员工</td>
        <td>高中</td>
    </tr>
    <tr>
        <td>3</td>
        <td>郭嘉</td>
        <td>男</td>
        <td>18</td>
        <td>部门经理</td>
        <td>硕士</td>
    </tr>
</table>

</body>
</html>